<template>
  <div class="app-container">
    <div style="text-align: center">
      <span style="font-size: 24px; color: #000000; font-weight: bold">{{ data.name }}</span>
    </div>
    <div style="margin: 20px 0">
      <span style="font-size: 14px; color: #666666">{{ data.description }}</span>
    </div>
    <div>
      <div v-for="item in questions">
        <div>
          <span style="font-size: 18px; color: #000000">{{ item.label }}（共{{ item.questions.length }}题）</span>
        </div>
        <div v-for="(q, index) in item.questions" style="margin: 10px">
          <div style="margin-bottom: 5px">
            {{ index + 1 }}.{{ q.topic }}<span style="margin-left: 10px; color: green">分值:{{q.score}}</span>
          </div>
          <div>
            <div v-if="q.type === '1'">
              <el-radio-group v-model="q.answer"
                              style="display: flex; flex-flow: column nowrap; align-items: flex-start">
                <el-radio style="margin: 5px 0" v-for="o in JSON.parse(q.options)" :label="o.value">{{ o.value }}.
                  {{ o.label }}
                </el-radio>
              </el-radio-group>
            </div>
            <div v-if="q.type === '2'">
              <el-checkbox-group v-model="q.answer.split(',')"
                                 style="display: flex; flex-flow: column nowrap; align-items: flex-start">
                <el-checkbox style="margin: 5px 0" v-for="o in JSON.parse(q.options)" :label="o.value">{{ o.value }}. {{
                    o.label
                  }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div v-if="q.type === '3'">
              <el-radio-group v-model="q.answer"
                              style="display: flex; flex-flow: column nowrap; align-items: flex-start">
                <el-radio style="margin: 5px 0" v-for="o in JSON.parse(q.options)" :label="o.value">{{ o.label }}
                </el-radio>
              </el-radio-group>
            </div>
            <div v-if="q.type === '4'">

            </div>
            <div v-if="q.type === '5'">

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {testPaperInfo} from "@/api/exam/testPaper";

export default {
  name: 'index',
  props: {
    id: {
      default: null,
      type: String
    }
  },
  dicts: ['exam_question_type'],
  data() {
    return {
      data: {},
      questions: []
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      testPaperInfo(this.id, 1).then(res => {
        this.data = res.data
        this.dict.type.exam_question_type.forEach(d => {
          const questions = this.data.questions.filter(q => q.type === d.value)
          if (questions.length > 0) {
            this.questions.push({
              label: d.label,
              questions
            })
          }
        })
        console.log("this.questions", this.questions)
      })
    }
  }
}
</script>

<style scoped>

</style>
